<!DOCTYPE html>
 <link rel="stylesheet" href="__PUBLIC_JS__/layui/extend/steps/style.css">
<style>
    .step-bar {
    position: absolute;
    z-index: 0;}
    .layui-form-label{width: 120px;}
</style>
{include file="system@block/layui" /}
<div id="step_demo" class="step-body">
    <!--步骤条-->
    <div class="step-header" style="width:80%;overflow: hidden;position: relative;">
        <ul>
            <li>
                <span class="step-name">选择订单</span>
            </li>
            <li>
                <span class="step-name">选择面料</span>
            </li>
            <li>
                <span class="step-name">填写用量</span>
            </li>
        </ul>
    </div>
</div>
<div>
    <div id="panel1">
        <table id="dataTable" lay-filter='dataTable'></table>
        <div class="pop-bottom-bar">
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left:inherit;text-align:center;">
                    <a data-href="{:url('mcSelectMaterial')}" data-table="dataTable" class="layui-btn materialTable" >下一步</a>
                    <a href="javascript:parent.layui.layer.closeAll();" class="layui-btn layui-btn-primary ml10">取消</a>
                </div>
            </div>
        </div>
        
    </div>
    <div id="panel2">
        <table id="secondDataTable" lay-filter='secondDataTable'></table>
        <div class="pop-bottom-bar">
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left:inherit;text-align:center;">
                    <a data-href="{:url('mcSelectMaterial')}" data-table="secondDataTable" class="layui-btn materialTable" >下一步</a>
                    <a href="javascript:parent.layui.layer.closeAll();" class="layui-btn layui-btn-primary ml10">取消</a>
                </div>
            </div>
        </div>
        
    </div>
    <div id="panel3">
        <form class="layui-form" action="">
            {:FormExt::input('捆条单件用量', 'caichuang_strip_dosage', '', '', '', 'lay-verify="mimonumber"')}
            {:FormExt::input('单件唛架用量', 'caichuang_shiji_dosage', '', '', '', 'lay-verify="mimonumber"')}
            {:FormExt::input('唛架预裁数', 'yingcai_count', '', '', '', '')}
            <div class="pop-bottom-bar">
                <div class="layui-form-item">
                    <div class="layui-input-block" style="margin-left:inherit;text-align:center;">
                        <div type="hidden" class="query"><div>
                                <button type="submit" class="layui-btn layui-btn-normal" id="submitBtn" lay-submit="mcOrderMaterial" lay-filter="mcOrderMaterial" hisi-data="{pop: true, refresh: true}">确定</button>
                        <a href="javascript:parent.layui.layer.closeAll();" class="layui-btn layui-btn-primary ml10">取消</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
//    layui.config({
//        version: 222222
//        , debug: true
//        , base: '__PUBLIC_JS__/layui/extend/'
//    }).extend({
//        steps: "steps/steps"
//    });
/*
 steps组件
 */
layui.use(['jquery', 'steps','table', 'form', 'laytpl','tool','layer'], function () {

    const $ = layui.$;
    var table = layui.table;
    var laydate = layui.laydate;
    var form = layui.form,layer=layui.layer;
    const $step = $("#step_demo").step();

    $("#preBtn").click(function (event) {
        // 上一步
        $step.preStep();
    });
    $("#nextBtn").click(function (event) {
        // 下一步
        $step.nextStep();
    });
    $("#goBtn").click(function (event) {
        // 到指定步
        $step.goStep(3);
    });
    window.go=function(num){
        var oldNum=num-1;
        $('#panel'+oldNum).hide();
        $('#panel'+num).show();
        $step.goStep(num);
        if(num==2){
            
        }
    }
    $('#panel2,#panel3').hide();
    table.render({
        elem: '#dataTable'
        ,url: '{:url("mergeCut",["sku"=>$sku])}' //数据接口
       // ,page: true //开启分页
        ,skin: 'row'
        ,even: true
//        ,limit: 20
//        ,limits: [20,50,100,150,200]
        ,text: {
            none : '暂无相关数据'
        }
        ,toolbar: true
        ,cellMinWidth: 80
        ,defaultToolbar: ['filter', 'exports', 'print']
        ,cols: [[ //表头
            {type:'checkbox'}
            ,{field: 'client_ordernum', title: '订单号'}
            ,{field: 'sku', title: 'skc'}
            ,{field: 'caichuang_can_do', title: '状态', templet: function(d){return '可裁剪';}}
        ]]
        ,done:function(res){
            //console.log(res)
        }
    });
    window.materialTable=function(url){
        table.render({
            elem: '#secondDataTable'
            ,url: url //数据接口
            ,skin: 'row'
            ,even: true
            ,text: {
                none : '暂无相关数据'
            }
            ,toolbar: true
            ,cellMinWidth: 80
            ,defaultToolbar: ['filter', 'exports', 'print']
            ,cols: [[ //表头
                {type:'checkbox'}
                ,{field: 'client_ordernum', title: '订单号'}
                ,{field: 'name', title: '材料名称'}
                ,{field: 'material_sku', title: 'sku'}
                ,{field: 'color', title: '颜色'}
                ,{field: 'cloth_num', title: '布号'}
                ,{field: 'length', title: '验布米长'}
            ]]
            ,done:function(res){
               
            }
        });
    }

    $(document).on('click', '.materialTable', function(){
        var that = $(this),
        query = '',sku=[],
        code = function(that) {
            var href = that.attr('href') ? that.attr('href') : that.attr('data-href');
            var tableObj = that.attr('data-table') ? that.attr('data-table') : 'dataTable';
            if (!href) {
                layer.msg('请设置data-href参数', {icon: 2,anim: 6});
                return false;
            }
            if ($('.checkbox-ids:checked').length <= 0) {
                var checkStatus = table.checkStatus(tableObj);
                if (checkStatus.data.length <= 0) {
                    layer.msg('请选择要操作的数据', {icon: 2,anim: 6});
                    return false;
                }
                for (var i in checkStatus.data) {
                    if (i > 0) {
                        query += '&';
                    }
                    sku[i]=checkStatus.data[i].material_sku;
                    query += '&id[]='+checkStatus.data[i].id;
                }
            } else {
                if (that.parents('form')[0]) {
                    query = that.parents('form').serialize();
                } else {
                    query = $('#pageListForm').serialize();
                }
            }
            href = href.substring(0, href.lastIndexOf('.'));
            if(that.attr("data-table")=="dataTable"){
                materialTable(href+"?"+query);
                go(2);
            }else if(that.attr("data-table")=="secondDataTable"){
                var new_sku=[];
                for(var i=0;i<sku.length;i++) {
                    var items=sku[i];
                    //判断元素是否存在于new_arr中，如果不存在则插入到new_arr的最后
                    if($.inArray(items,new_sku)==-1) {
                        new_sku.push(items);
                    }
                }
                if(new_sku.length==1){
                    go(3);
                    $('.query').attr("data-query",query);
                }else{
                    layer.msg("选中面料sku存在不同无法合裁，请重新选择", {icon: 2,anim: 6});
                    return false;
                }  
            }  
        };
        code(that);
        return false;
    });
    form.on('submit(mcOrderMaterial)', function(data){
        $("#submitBtn").removeClass('layui-btn-normal').addClass('layui-btn-disabled').prop('disabled', true).text('提交中...');
        var formData = data.field,query=$('.query').attr("data-query");
        $.ajax({
               type: "POST",
               url: "{:url('mcOrderMaterial')}?"+query,
               data: formData,
               dataType:"json",
               success: function(res){
                    if (res.code == 1) {
                        layer.msg(res.msg, {icon: 1});
                        setTimeout(parent.layer.closeAll(),6000)
                        parent.layui.table.reload('dataTable');
                    } else {
                         layer.msg(res.msg, {icon: 2,anim: 6});
                    }
               }
            });
        return false;
    });
});

</script>
